<template>
  <div>
    <nav-bar style="background-color: #0689f4; color: #fff">
      <div slot="center">点检异常处理情况</div>
    </nav-bar>

    <div class="content-top">
        <canvas class="chart-box" id="proChart"></canvas>
    
        <canvas class="chart-box" id="Chart"></canvas>
      
        <canvas class="chart-box" id="pro" @click="goPerform"></canvas>
    </div>
  </div>
</template>
<script>
import NavBar from "@/components/NavBar.vue";
var echarts = require("echarts");

export default {
  name: "performIndex",
  components: {
    NavBar,
  },
  props: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.drawChart();
    this.draw();
    this.Chart();

  },
  methods: {
    goPerform(){
      this.$router.push({
        name:'performList',
      })
    },
    drawChart() {
      var chartDom = document.getElementById("proChart");
      var myChart = echarts.init(chartDom, null, {
        devicePixelRatio: window.devicePixelRatio,
      });
      var option;
      option = {
        title: {
          text: "铸造车间",
          subtext: "点检异常处理情况",
          subtextStyle: {
            fontSize: 10
          },
          left: "center",
          textStyle: {
            fontSize: 14
          },
          
        },
        dataset: {
          source: [
            ["type", "点检异常数", "待分配", "待处理", "已处理", "已超期"],
            ["数量", 320, 100, 50, 70, 50],
          ]
        },
        legend: {
          show: true,
          left:'right',
          top: "17%",
          itemWidth: 16,
          itemHeight: 8,
          textStyle: {
            fontSize: 8,
          },
        },
        grid: {
          left: "2%",
          right: "2%",
          bottom: "2%",
          height:'65%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            fontSize: 8,
          },
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            fontSize: 9,
          },
        },
        series: [
          {
            type: 'bar',
            seriesLayoutBy: "row",
            label: {
              show: true,
              position: "top",
              color: "#555555",
              fontSize: 8,
            },
          }
        ]
      };
      option && myChart.setOption(option);
    },
    draw() {
      var chartDom = document.getElementById("Chart");
      var myChart = echarts.init(chartDom, null, {
        devicePixelRatio: window.devicePixelRatio,
      });
      var option;
      option = {
        dataset: {
          source: [
            ["type", "点检异常数", "待分配", "待处理", "已处理", "已超期"],
            ["数量", 220, 50, 100, 70, 36],
          ]
        },
        title: {
          text: "机加工车间",
          left: "center",
          subtext: "点检异常处理情况",
          subtextStyle: {
            fontSize: 10
          },
          textStyle: {
            fontSize: 14
          },
        },
        grid: {
          left: "2%",
          right: "2%",
          bottom: "2%",
          height:'65%',
          containLabel: true,
        },
        legend: {
          show: true,
          left:'right',
          top: "17%",
          itemWidth: 16,
          itemHeight: 8,
          textStyle: {
            fontSize: 8,
          },
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            fontSize: 8,
          },
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            fontSize: 9,
          },
        },
        series: [
          {
            type: 'bar',
            seriesLayoutBy: "row",
            label: {
              show: true,
              position: "top",
              color: "#555555",
              fontSize: 8,
            },
          }
        ]
      };
      option && myChart.setOption(option);
    },
    Chart() {
      var chartDom = document.getElementById("pro");
      var myChart = echarts.init(chartDom, null, {
        devicePixelRatio: window.devicePixelRatio,
      });
      var option;
      option = {
        dataset: {
          source: [
            ["type", "点检异常数", "待分配", "待处理", "已处理", "已超期"],
            ["数量", 200, 40, 50, 110,26],
          ]
        },
       title: {
          text: "涂装车间",
          left: "center",
          subtext: "点检异常处理情况",
          subtextStyle: {
            fontSize: 10
          },
          textStyle: {
            fontSize: 14
          },
        },
        grid: {
          left: "2%",
          right: "2%",
          bottom: "2%",
          height:'65%',
          containLabel: true,
        },
        legend: {
          show: true,
          left:'right',
          top: "17%",
          itemWidth: 16,
          itemHeight: 8,
          textStyle: {
            fontSize: 8,
          },
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            fontSize: 8,
          },
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            fontSize: 9,
          },
        },
        series: [
          {
            type: 'bar',
            seriesLayoutBy: "row",
            label: {
              show: true,
              position: "top",
              color: "#555555",
              fontSize: 8,
            },
          }
        ]
      };
      option && myChart.setOption(option);
    },
  },
};
</script>
<style scoped lang="less">
.chart-box {
  margin-top: 10px !important;
  width: 100%;
  }
</style>